import React from 'react';
import {connect} from 'react-redux';
import { ajax } from 'utils/index';
import {getData} from '../../../../actions/component';
class CountdownPromV1Preview extends React.Component {
	constructor(props) {
		  super(props);
		  this.props.dispatch(
				getData(
					{
						api:'getTagTask',
						data_id:this.props.dataId,
						params:{data_format:"form_data",task_type:"qrcode",fields:"task_id,countdown,tag_name"}
					}
				)
		  );
	}
	findCard(id) {
		let cards = this.props.dataSource;
		const card = cards.filter(c => c.id === id)[0];
		return {
		  card,
		  index: cards.indexOf(card)
		};
	}
	style = {position:"absolute",
			  boxSizing:"border-box",
			  fontSize:"61px",
			  left:"97px",
			  top:"52px",
			  color:"#ffe553",
			  fontFamily:"Led"};
	render() {
		const componentData = this.props.component.data[this.props.dataId];
		const {card} = this.findCard(this.props.dataId);
		let countdown = 0;
		if(componentData){
			componentData.map(data=>{
				if(card.formData.countdownId==data.value){
					countdown = parseInt(data.countdown);
				}
			})
		}
		const hour = parseInt(countdown/3600);
		const hour_unit = parseInt(hour%10);
		const hour_decade = parseInt(hour/10);
		const countdown_insecond = countdown*60;
		const minute = parseInt(countdown_insecond/60);
		const minute_unit = parseInt(minute%10);
		const minute_decade = parseInt(minute/10);
		const seconds = parseInt(countdown_insecond%60);
		const seconds_unit = parseInt(seconds%10);
		const seconds_decade = parseInt(seconds/10);
		const millisecond = parseInt((countdown*10)%10);
		return (
		   <div style={{position:"relative",backgroundColor:"#FFFFFF"}}>  
				<img src={card.formData.countdownBg}  style={{width:"320px"}}/>
					{/*
					<span style={{position:"absolute",
							  boxSizing:"border-box",
							  fontSize:"70px",
							  left:"155px",
							  top:"10px",
							  color:"rgb(255, 255, 255)",
							  width:"83px",
							  textAlign:"center"
							  }}
							  >
							  {countdown}
					</span> 
					*/}
				<span style={{...this.style,left:"13px"}}>
					{hour_unit}
				</span>
				<span style={{...this.style,left:"47px"}}>
					{hour_decade}
				</span>
				<span style={this.style}>
					{minute_decade}
				</span>
				<span style={{...this.style,left:"131px"}}>
					{minute_unit}
				</span>
				<span style={{...this.style,left:"182px"}}>
					{seconds_decade}
				</span>
				<span style={{...this.style,left:"216px"}}>
					{seconds_unit}
				</span>
				<span style={{...this.style,left:"266px"}}>
					{millisecond}
				</span>
		   </div>
		);
	}
}
CountdownPromV1Preview.defaultProps = {
};
function mapStateToProps(state){
  return {
    dataSource:state.todoMVCReducer,
	component:state.component
  }
};
export default connect(mapStateToProps)(CountdownPromV1Preview);

//https://segmentfault.com/q/1010000008860005  提问